<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="邵铭">
    <title></title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 1200px;
            margin: auto;
        }
        nav {
            margin-top: 80px;
            width: 100%;
            height: 50px;
            border-top: 1px solid #E3E7E8;
            border-bottom: 1px solid #E3E7E8;
        }
        .head {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
        }
        .head li a {
            padding: 0 5px;
            font-size: 14px;
            display: block;
            line-height: 50px;
            color: #555555;
            text-decoration: none;
        }
        .head li a:hover {
            color: red;
        }
        .index a {
            color: #2FB3FF;
            height: 50px;
            border-bottom: 1px solid #2FB3FF;
        }

        .index a:hover {
            color: #2FB3FF;
        }
      .jiantou {
            display: inline-block;
            position: absolute;
            width: 15px;
            height: 15px;
            background-image: url(1.png);
            background-position: -110px 0;
            float: left;
            margin-left: 80px;
            margin-top: -19px;
        }

        .active {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 200px;
            border: 1px solid #ebebeb;
            position: absolute;
            margin-left: -67px;
            margin-top: -2px;
            padding: 10px 10px 10px 0;
            box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.3);
        }

        .active li {
            display: inline-block;
            width: 80px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0 0 0 10px;
            height: 30px;
            line-height: 30px;
        }





        .active li a {
            padding: 0;
            font-size: 14px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            color: #555555;
        }


        .juji {
            display: none;
        }

        li:hover .juji {
            display: block;
        }

        .movie {
            display: none;
        }

        li:hover .movie {
            display: block;
        }

        .child {
            display: none;
        }

        li:hover .child {
            display: block;
        }
        .more{
            width: 100px;
            margin-left: -35px;
            display: none;
        }
        .more li{
            padding-left: 20px;
        }
        li:hover .more{
          display: block;
        }
        .mj{
            margin-left: 40px;
        }
        .row{
             display: inline-block;
            position: absolute;
            width: 10px;
            height: 8px;
            background-image: url(1.png);
            background-position: -60px 0;
            margin-top: 22px;
            margin-left: 5px;
            transition: all 0.35s linear;
        }
         li:hover .row{
             transform: rotate(180deg);
         }
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <ul class="head">
                <li class="index"><a href="#">首页</a></li>
                <li>
                    <a href="#">剧集</a>
                    <ul class="active juji">
                        <span class="jiantou"></span>
                        <li><a href="#" title="楚乔传 TV版">楚乔传 TV版</a></li>
                        <li><a href="#" title="春风十里不如你">春风十里不如你</a></li>
                        <li><a href="#" title="镇魂街 第一季">镇魂街 第一季</a></li>
                        <li><a href="#" title="我的前半生">我的前半生</a></li>
                        <li><a href="#" title="醉玲珑">醉玲珑</a></li>
                        <li><a href="#" title="微微一笑很倾城">微微一笑很倾城</a></li>
                        <li><a href="#" title="终极三国">终极三国</a></li>
                        <li><a href="#" title="龙珠传奇">龙珠传奇</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">电影</a>
                    <ul class="active movie">
                        <span class="jiantou"></span>
                        <li><a href="#" title="速度与激情8">速度与激情8</a></li>
                        <li><a href="#" title="人间大炮">人间大炮</a></li>
                        <li><a href="#" title="战狼">战狼</a></li>
                        <li><a href="#" title="杀破狼2">杀破狼2</a></li>
                        <li><a href="#" title="逆时营救">逆时营救</a></li>
                        <li><a href="#" title="记忆大师">记忆大师</a></li>
                        <li><a href="#" title="我的外星女友">我的外星女友</a></li>
                        <li><a href="#" title="有部电影">有部电影</a></li>
                    </ul>
                </li>
                <li><a href="#">综艺</a></li>
                <li><a href="#">音乐</a></li>
                <li>
                    <a href="#">少儿</a>
                    <ul class="active child">
                        <span class="jiantou"></span>
                        <li><a href="#" title="宝狄与好友之梦想英雄">宝狄与好友之梦想英雄</a></li>
                        <li><a href="#" title="小猪佩奇">小猪佩奇</a></li>
                        <li><a href="#" title="纳米核心 第三季">纳米核心 第三季</a></li>
                        <li><a href="#" title="汪汪队立大功 第二季">汪汪队立大功 第二季</a></li>
                        <li><a href="#" title="我的汤姆猫短片">我的汤姆猫短片</a></li>
                        <li><a href="#" title="会说话的家族">会说话的家族</a></li>
                        <li><a href="#" title="小伶玩具">小伶玩具</a></li>
                        <li><a href="#" title="棉花糖和云朵妈妈">棉花糖和云朵妈妈</a></li>
                    </ul>
                </li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">文化</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">搞笑</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">游戏</a></li>
                <li>
                    <a href="#">更多<section class="row"></section></a>
                     
                     <ul class="active more">
                        <span class="jiantou mj"></span>
                        <li><a href="#" title="VR">VR</a></li>
                        <li><a href="#" title="生活">生活</a></li>
                        <li><a href="#" title="原创">原创</a></li>
                        <li><a href="#" title="排行">排行</a></li>
                        
                    </ul>
                </li>

            </ul>
        </div>
    </nav>
</body>

</html>
<script>

</script>